$color-primary = #F8283B
$color-secondary = #7D868C

*, *:after, *:before
  box-sizing: border-box

html, body
  margin: 0
  padding: 0
  height: 100%
  overflow: auto
  font-family: sans-serif

body.drag::before
  content: ''
  position: fixed
  top: 0
  left: 0
  bottom: 0
  right: 0
  background: rgba($color-primary, 0.3)
  border: 5px $color-primary dashed

main
  max-width: 800px
  margin: 0 auto
  padding: 20px 20px 0

section
  margin: 50px 0

.logo
  display: inline-block
  position: relative
  margin-bottom: 10px

.logo:after
  display: inline-block
  position: absolute
  top: 0
  right: -32px
  font-size: 11px
  color: #BBB
  content: 'BETA'

.logo img
  margin: 0
  height: 50px

.subtitle
  margin-top: 0
  margin-bottom: 20px
  color: $color-secondary

a:link, a:visited
  color: $color-primary
  text-decoration: none

a:hover, a:focus, a:active
  text-decoration: underline

label
  margin-right: 10px
input, button
  font-size: 16px

input[name=torrentId]
  width: 300px

.log, .speed
  font-family: monospace
  font-size: 14px

.speed:not(:empty)
  padding: 20px
  margin: 10px 0
  background: #EEE

.log p
  margin: 0
  word-break: break-word

footer
  margin: 30px 0
  font-size: 0.8em
  color: $color-secondary
  text-align: center

.wormhole
  color: $color-secondary
  text-align: center
  max-width: 500px
  margin: 0 auto

video, img, audio, iframe, object
  display: block

video, img, audio
  max-width: 100%
  margin: 10px 0

video
  min-width: 320px
  min-height: 180px

audio
  width: 100%
  height: 50px

iframe, object
  width: 1000px
  max-width: 100%
  height: 600px
